<template>
  <div class="details">
    <div v-if="requestSuccess">
      <page-list-layout>
        <!-- 歌单详情头部 -->
        <template v-slot:one>
          <Header v-if="currentPath === '/play-list-detail'" :playlist="store.listPlaylistDetails"/>
          <Header v-if="currentPath === '/collection-detail'" :playlist="albumInfo.album" :songs="albumInfo.songs"/>
          <Header v-if="currentPath === '/pc-song-detail'" :playlist="songInfo"/>
          <Header v-if="currentPath === '/dj-radio'" :playlist="radioInfo.info" :radioMusic="radioInfo.songs"/>
          <Header v-if="currentPath === '/radio-program'" :playlist="radioProgramInfo.info" :radioMusic="radioInfo.songs"/>
        </template>
        <!-- 歌单详情歌曲列表 -->
        <template v-slot:two>
          <MusicList
              v-if="currentPath === '/play-list-detail'"
              :listPlaylistDetails="store.listPlaylistDetails"
              :paginationPlaylist="store.paginationPlaylist"
          />
          <MusicList
              v-if="currentPath === '/collection-detail'"
              :listPlaylistDetails="albumInfo.album"
              :paginationPlaylist="albumInfo.songs"
          />
          <!-- /dj-radio -->

          <MusicList
              v-if="currentPath === '/dj-radio'"
              :isOther="false"
              :listPlaylistDetails="radioInfo.info"
              :isMusic="false"
              :isMobileSinger="false"
              :noShowPage="false"
              :isAddPlayList="false"
              :isHeader="false"
              :isSong="false"
              :isRadioPlayNum="true"
              :paginationPlaylist="radioInfo?.songs?.programs"
          />

          <MusicList
              v-if="currentPath === '/radio-program'"
              :listPlaylistDetails="radioProgramInfo.info"
              :paginationPlaylist="radioProgramInfo.songs"
              :isMusic="false"
              :isOther="false"
              :isMobileSinger="false"
              :noShowPage="false"
              :isHeader="false"
              :isProduction="true"
          />

        </template>
        <!-- 歌单详情评论 -->
        <template v-slot:three>
          <Review v-if="store.currentInfo.type !== 5"/>
        </template>
        <!-- 歌单详情喜欢这个歌单 专辑和歌曲状态下不展示 -->
        <template v-slot:top>
          <!-- 相似歌曲 -->
          <similar-songs v-if="store.currentInfo.type === 0"/>
          <people-playlist v-if="store.currentInfo.type === 1"/>
          <!-- 更多电台节目 -->
          <some-radio-program v-if="store.currentInfo.type === 6"/>
          <!-- 可能喜欢的电台 -->
          <radio-maybe-like v-if="store.currentInfo.type === 5"/>
        </template>
        <!-- 歌单详情热门歌单 -->
        <template v-slot:center>
          <playlist-hot v-if="store.currentInfo.type !== 5" />
        </template>
      </page-list-layout>
    </div>
    <!-- loading -->
    <loading v-else/>
  </div>
</template>

<script setup>
import {inject, reactive, toRefs, watch} from "vue";
import {useStore} from "@/store/index"
import {useRoute} from "vue-router";
import PageListLayout from '@/components/PageListLayout/index.vue'
import Header from './components/Header/index.vue'
// 音乐列表
import MusicList from '@/components/MusicList/index.vue'
// 评论
import Review from '@/components/Review/index.vue'
// 喜欢这个歌单的人
import PeoplePlaylist from './components/PeoplePlaylists/index.vue'
// 右侧热门歌单
import PlaylistHot from './components/PlaylistHot/index.vue'
// 相似歌曲
import SimilarSongs from './components/SimilarSongs/index.vue'
// 可能喜欢的电台
import RadioMaybeLike from './components/RadioMaybeLike/index.vue'

// 更多电台节目
import SomeRadioProgram from './components/SomeRadioProgram/index.vue'

const store = useStore()
const route = useRoute()

const data = reactive({
  albumInfo: {}, // 包含歌曲，信息
  currentPath: '', // 记录当前路由用来判断显示哪些数据
  requestSuccess: false, // 请求成功才展示组件
  songInfo: {}, // 存储歌曲信息
  radioInfo: {}, // 存储电台信息
  radioProgramInfo: {} // 电台节目数据
})

const {albumInfo, currentPath, requestSuccess, songInfo, radioInfo, radioProgramInfo } = toRefs(data)

// 获取当前路由进行对比渲染哪些数据
data.currentPath = route.path

// 页面级依赖注入不会刷新整个页面
const reloadPage = inject('reloadPage')
// 获取歌单详情数据
const usePort = {
  // 获取专辑信息
  '/collection-detail': async () => {
    // 评论参数 type 是请求数据类型 id请求的数据id
    store.currentInfo = {
      type: 2,
      id: route.query.id,
      topTitle: '喜欢这张专辑的人',
      centerTile: 'Ta的其他热门专辑'
    }
    // 开启loading
    data.requestSuccess = false
    // 专辑歌曲
    const res = await store.getAlbum(route.query.id)
    data.requestSuccess = true
    const {album, songs} = res
    // console.log(album)
    //  专辑工作室的id，用来获取专辑详情这个工作室其他专辑
    store.currentInfo.studioId = album.artist.id
    data.albumInfo = {
      album: {
        id: album.id, // 专辑id
        coverImgUrl: album.blurPicUrl, // 专辑图片
        name: album.name, // 专辑名字
        commentCount: album.info.commentCount, // 评论数
        shareCount: album.info.shareCount,// 分享数
        description: album.description,
        creator: {
          artists: album.artists, // 歌手
          company: album.company, // 发行公司
          id: album.artist.id, // 工作室id
          createTime: album.publishTime, // 发行时间
        },
        trackCount: album.size, // 多少首歌
      },
      songs // 歌曲信息
    }
    // 获取专辑评论
    await store.getCommentAlbum()

  },
  '/play-list-detail': async () => {
    // 评论参数 type 是请求数据类型 id请求的数据id
    store.currentInfo = {
      type: 1,
      id: route.query.id,
      topTitle: '喜欢这个歌单的人', // 右侧title
      centerTile: '热门歌单'
    }

    // 开启loading
    data.requestSuccess = false
    // 获取歌单数据
    await store.clickGetPlaylistDetail(route.query.id)
    // 获取歌单评论
    await store.getCommentPlaylist(route.query.id)

    // 不知道什么原因导致请求loading框不出现，请求完成数据1s之后在关闭
    setTimeout(() => {
      data.requestSuccess = true
    }, 1000)
  },
  '/pc-song-detail': async () => {
    // 评论参数 type 是请求数据类型 id请求的数据id
    store.currentInfo = {
      type: 0,
      id: route.query.id,
      topTitle: '喜欢这个歌单的人', // 右侧title
      centerTile: '包含这首歌的歌单',
      playMoreLike: '相似歌曲'
    }
    // 开启loading
    data.requestSuccess = false
    // 获取歌曲信息
    const res = await store.getOnlySongDetail(route.query.id)
    // 获取歌词
    const lyric = await store.getLyric(route.query.id, true)
    // 请求完成打开显示页面
    data.requestSuccess = true
    // 歌曲信息
    const songs = res.songs[0]
    data.songInfo = {
      id: songs.id, // 歌曲id
      coverImgUrl: songs.al.picUrl, // 歌曲图片
      name: songs.name, // 歌曲名字
      createTime: songs.publishTime, // 发行时间
      commentCount: '', // 评论数
      shareCount: '',// 分享数
      description: lyric, // 歌词
      ar_al: {
        ar: songs.ar,
        al: songs.al
      },
      trackCount: '', // 多少首歌
    }
    // 获取评论
    await store.getCommentMusic()
  },
  '/dj-radio': async () => {
    // 开启loading
    data.requestSuccess = false

    store.currentInfo = {
      type: 5,
      id: route.query.id,
      topTitle: '你可能也喜欢', // 右侧title
    }

    const res = await store.getDjDetail(route.query.id)
    const pro = await store.getDjProgram({ rid: route.query.id }, res.programCount)

    data.radioInfo = {
      info: {
        id: res.id, // 电台id
        coverImgUrl: res.picUrl, // 电台图片
        name: res.name, // 电台名字
        shareCount: res.shareCount,// 电台分享数
        description: res.desc, // 电台描述
        category: res.category, // 电台类型
        artists: res.dj, // 电台作者歌手
        trackCount: res.size, // 多少首歌
        programCount: res.programCount, // 多少期
        subCount: res.subCount,// 订阅数量
        subed: res.subed // 是否订阅
      },
      songs: pro
    }


    // 请求完成打开显示页面
    data.requestSuccess = true
    // console.log(res)
    // console.log(pro)
  },
  '/radio-program': async () => {
    store.currentInfo = {
      type: 6,
      id: route.query.id,
      topTitle: '更多节目', // 右侧title
    }
    // 获取电台节目信息
    const program = await store.getProgramDetail(route.query.id)
    data.radioProgramInfo = {
      info: {
        id: program.id, // 电台节目id
        name: program.name, // 电台节目名字
        coverImgUrl: program.coverUrl, // 电台节目图片
        likedCount: program.likedCount, // 电台节目点赞量
        radio: program.radio, // 电台信息 是否订阅和订阅数量都在里面
        listenerCount: program.listenerCount, // 电台节目播放数量
        commentCount: program.commentCount, // 评论数
        shareCount: program.shareCount, // 分享数
        subCount: program.radio.subCount, // 订阅数
        subed: program.radio.subed, // 是否订阅
        description: program.description, // 描述
        duration: program.mainSong.duration, // 播放时长
        liked: program.liked // 是否喜欢这个电台节目
      },
      songs: program.songs
    }
    console.log(program)
    // 获取电台节目评论
    await store.getCommentDj()
    data.requestSuccess = true
  }
}
usePort && usePort[route.path] && usePort[route.path]()

// 由于路由跳转同一页面不会刷新但是路由会改变所以监听路由变化使用，依赖注入刷新页面
// TODO:这样导致刷新的时候播放器会暂停(在layout页面中注册依赖注入刷新这样就不会导致播放器暂停播放了)
watch(route, () => {
  reloadPage()
})
</script>

<style scoped>

</style>
